<template>
  <el-card class="box-card" style="width: 100%;height: 100%">
    <div slot="header" class="clearfix">
      <span style="font-weight:bold;font-size: 20px">订单</span>
      <el-input style="width:200px;margin:0 10px 0 20px"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="inputSelect">
      </el-input>

      <el-button round @click="search">搜索</el-button>

      <el-button style="float: right; padding: 3px 0" type="text">
        <i class="el-icon-refresh-left" @click="initList"><span> 刷新页面</span></i>
      </el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="任务发起人：">
              <span>{{ props.row.sendUser }}</span>
            </el-form-item>
            <el-form-item label="任务接受人：">
              <span>{{ props.row.receiveUser }}</span>
            </el-form-item>
            <el-form-item label="需求人才：">
              <span>{{ props.row.talentCategory }}</span>
            </el-form-item>
            <el-form-item label="工作方式：">
              <span v-if="props.row.operationMode===1">远程</span>
              <span v-else-if="props.row.operationMode===2">驻场</span>
              <span v-else>远程+驻场</span>
            </el-form-item>
            <el-form-item label="任务描述：">
              <span>{{ props.row.requirementsDescription }}</span>
            </el-form-item>
            <el-form-item label="使用技术：">
              <span>{{ props.row.skillsRequirements }}</span>
            </el-form-item>
            <el-form-item label="任务酬劳：">
              <span>{{ props.row.salary }}</span>
            </el-form-item>
            <el-form-item label="任务周期：">
              <span>{{ props.row.workCycle }}</span>
            </el-form-item>
            <el-form-item label="开始时间：">
              <span>{{ props.row.orderBeginTime }}</span>
            </el-form-item>
            <el-form-item label="结束时间：">
              <span>{{ props.row.orderEndTime }}</span>
            </el-form-item>
            <el-form-item label="负责人姓名：">
              <span>{{ props.row.isSuerName }}</span>
            </el-form-item>
            <el-form-item label="负责人电话：">
              <span>{{ props.row.isSuerTelephone }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
          label="订单编号"
          prop="orderNum">
      </el-table-column>
      <el-table-column
          label="任务标题"
          prop="taskTitle">
      </el-table-column>
      <el-table-column
          label="任务发起人"
          prop="sendUser">
      </el-table-column>
      <el-table-column
          label="任务接受人"
          prop="receiveUser">
      </el-table-column>
      <el-table-column
          label="负责人电话"
          prop="isSuerTelephone">
      </el-table-column>
      <el-table-column
          label="订单状态"
          prop="orderStatus">
      </el-table-column>

    </el-table>


    <el-pagination style="margin-top: 20px"
                   @current-change="handleCurrentChange"
                   background
                   layout="prev, pager, next"
                   :current-page.sync="currentPage"
                   :total=total>
    </el-pagination>

  </el-card>
</template>

<script>
export default {
  name: "adminOrder",
  data() {
    return {
      inputValue: '',
      inputSelect: '',
      tableData: [],
      total: 0,
      currentPage: 1,
    }
  },
  methods: {
    refresh() {
      this.initList();
    },
    handleCurrentChange(newPage) {
      this.getData(newPage, this.inputValue)
    },
    initList() {
      this.currentPage = 1
      this.inputValue = ''
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.getData(this.currentPage, '')
      loading.close()

    },
    search() {
      this.currentPage = 1
      this.inputValue = this.inputSelect
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.getData(this.currentPage, this.inputValue)
      loading.close()
    },
    async getData(pageNum, keyword) {
      const {data: res} = await this.$http.get('/AOC/getAllOrder', {
        params: {
          pageNum: pageNum,
          pageSize: 10,
          keyword: keyword
        }
      })
      this.total = res.content.total
      this.tableData = []
      for (let i = 0; i < res.content.list.length; i++) {
        switch (res.content.list[i].orderStatus) {
          case 0:
            res.content.list[i].orderStatus = "进行中..."
            break;
          case 2:
            if (res.content.list[i].paymentStatus === 0) {
              res.content.list[i].orderStatus = "待支付"
            } else if (res.content.list[i].paymentStatus === 1) {
              res.content.list[i].orderStatus = "待评价"
            } else {
              res.content.list[i].orderStatus = "已完成"
            }
            break;
          case 4:
            res.content.list[i].orderStatus = "已退款"
            break;
        }
        this.tableData.push(res.content.list[i])
      }
    }
  },
  mounted() {
    this.initList()
  }
}
</script>

<style scoped>

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

</style>